<template>
	<div id="">
		<el-form :inline="true" size="medium">
			<el-form-item>
				<el-select 
					v-model="params.tenantId" 
					placeholder="选择分站" 
					@change="search"
					clearable>
					<el-option 
					v-for="item in tenantList" 
					:label="item.company" 
					:value="item.id"></el-option>
				</el-select>
			</el-form-item>
			<el-form-item>
				<el-input placeholder="id" v-model="params.id" clearable></el-input>
			</el-form-item>
			<el-form-item>
				<el-input placeholder="上级ID" v-model="params.parentId" clearable></el-input>
			</el-form-item>
			<el-form-item>
				<el-input placeholder="手机号码" v-model="params.phone" clearable></el-input>
			</el-form-item>
			
			<el-form-item>
				<el-button type="primary" @click="search">搜索</el-button>
			</el-form-item>
		</el-form>

		<el-table :data="list" v-loading="loading" stripe>
			<el-table-column label="id" prop="id" align="center"></el-table-column>
			<el-table-column 
				label="分站"
				align="center">
				<template slot-scope="scope">
					<span v-for="item in tenantList" v-if="item.id == scope.row.tenant_id">{{item.company}}</span>
				</template>
			</el-table-column>
			<el-table-column label="手机号码" prop="phone" align="center"></el-table-column>
			<el-table-column label="qq" prop="qq" align="center"></el-table-column>
			<el-table-column label="微信号" prop="wechat" align="center"></el-table-column>
			<el-table-column label="邮箱" prop="email" align="center"></el-table-column>
			<el-table-column label="上级id" prop="parent_id" align="center"></el-table-column>
			<el-table-column label="邀请人数" prop="invite_count" align="center"></el-table-column>
			<el-table-column label="累计总额" prop="total_amount" align="center"></el-table-column>
			<el-table-column label="当前余额" prop="balance" align="center"></el-table-column>
			<el-table-column label="提现状态" prop="withdraw_status" align="center">
				<template slot-scope="scope">
                    <span v-if="scope.row.withdraw_status==1">可提现</span>
					<span v-else>不可提现</span>
                </template>
			</el-table-column>
			<el-table-column align="center" label="首充时间">
                <template slot-scope="scope">
                    {{$common.getDate(scope.row.first_recharge_time)}}
                </template>
            </el-table-column>
			<el-table-column align="center" label="创建时间">
                <template slot-scope="scope">
                    {{$common.getDate(scope.row.create_time)}}
                </template>
            </el-table-column>
			<el-table-column label="操作" align="center">
				<template slot-scope="scope">
					<el-button type="text" @click="getInfo(scope.row.id)">查看详情</el-button>
					<el-button @click="openDialog(scope.row)" size="small" type="text">修改金额</el-button>
					<el-button @click="freezeOrThaw(scope.row.id,-1)" v-if="scope.row.status == 1" size="small" type="text">冻结
					</el-button>
					<el-button @click="freezeOrThaw(scope.row.id,1)" v-else size="small" type="text">解冻</el-button>
					<el-button @click="openWithdrawDialog(scope.row)" size="small" type="text">修改提现状态</el-button>
				</template>
			</el-table-column>
		</el-table>

		<el-pagination 
			class="page"
			background
			@size-change="handleSizeChange" 
			@current-change="getList" 
			:current-page.sync="params.pageNo" 
			:page-sizes="[10, 20, 50, 100]" 
			:page-size="params.pageSize" 
			layout="total, sizes, prev, pager, next, jumper" 
			:total="total">
		</el-pagination>

		<el-dialog
			title="修改金额"
			:visible.sync="dialogVisible"
			@close="closeDialog"
			width="30%"
			center>
			<el-form label-width="80px" :model="formData" ref="ruleForm">
				<el-form-item label="流水类型:">
					<el-select v-model="formData.type">
						<el-option v-for="item in typeList" :label="item.name" :value="item.value"></el-option>
					</el-select>
				</el-form-item>
				<el-form-item label="交易类型:">
					<el-select v-model="formData.dealType">
						<el-option v-for="item in dealTypeList" :label="item.name" :value="item.value"></el-option>
					</el-select>
				</el-form-item>
				<el-form-item label="金额:" prop="money">
					<el-input v-model="formData.amount"></el-input>
				</el-form-item>
				<el-form-item label="商家ID:">
					<el-input disabled v-model="formData.busId"></el-input>
				</el-form-item>
				<el-form-item label="描述:">
					<el-input v-model="formData.dealDesc"></el-input>
				</el-form-item>
			</el-form>
			<div class="align-center">
          <el-button @click="dialogVisible = false">取 消</el-button>
          <el-button type="primary" @click="editMoney">确 定</el-button>
      </div>
		</el-dialog>

      <el-dialog
          title="信息详情"
          :visible.sync="showInfo"
          @close="closeDialog"
          width="800px"
          center
          v-loading="detailLoading"
      >
          <div class="info_title">商家信息</div>
          <el-form :inline="true" label-width="100px" class="margin_top20">
              <el-form-item label="手机号码：">
                  <div class="info_item">{{busInfo.phone}}</div>
              </el-form-item>
              <el-form-item label="QQ 号码：">
                  <div class="info_item">{{busInfo.qq || '--'}}</div>
              </el-form-item>
              <el-form-item label="微信号：">
                  <div class="info_item">{{busInfo.wechat || '--'}}</div>
              </el-form-item>
              <el-form-item label="邮箱：">
                  <div class="info_item">{{busInfo.email || '--'}}</div>
              </el-form-item>
              <el-form-item label="当前余额：">
                  <div class="info_item">{{busInfo.balance | money}}</div>
              </el-form-item>
              <el-form-item label="累计总额：">
                  <div class="info_item">{{busInfo.total_amount | money}}</div>
              </el-form-item>
              <el-form-item label="邀请人数：">
                  <div class="info_item">{{busInfo.invite_count}}</div>
              </el-form-item>
              <el-form-item label="状态：">
                  <div class="info_item">{{busInfo.status == 1 ? '正常' : '冻结'}}</div>
              </el-form-item>
              <el-form-item label="注册时间：">
                  <div class="info_item">{{$moment(busInfo.create_time).format('Y-MM-DD HH:mm')}}</div>
              </el-form-item>
              <el-form-item label="secret：">
                  <div class="info_item">{{busInfo.encrypt}}</div>
              </el-form-item>
          </el-form>

          <div class="info_title margin_top10">商家所属分站信息</div>
          <el-form label-width="100px" :inline="true" class="margin_top20">
              <el-form-item label="分站id：">
                  <div class="info_item">{{tenantInfo.id}}</div>
              </el-form-item>
              <el-form-item label="所属分站：">
                  <div class="info_item">{{tenantInfo.company}}</div>
              </el-form-item>
              <el-form-item label="网站域名：">
                  <div class="info_item">{{tenantInfo.domain_name}}</div>
              </el-form-item>
              <el-form-item label="网站标题：">
                  <div class="info_item">{{tenantInfo.title}}</div>
              </el-form-item>
              <el-form-item label="手机号码：">
                  <div class="info_item">{{tenantInfo.phone}}</div>
              </el-form-item>
              <el-form-item label="QQ号码：">
                  <div class="info_item">{{tenantInfo.qq}}</div>
              </el-form-item>
              <el-form-item label="logo：">
                  <div class="info_item">
                      <el-image :src="tenantInfo.logo | fullPath" :preview-src-list="[$envConfig.serviceUrl + tenantInfo.logo]" style="width: 80px; height: 80px"></el-image>
                  </div>
              </el-form-item>
              <el-form-item label="状态：">
                  <div class="info_item">{{tenantInfo.status == 1 ? '开启' : '关闭'}}</div>
              </el-form-item>
          </el-form>
          <div class="align-center">
              <el-button @click="showInfo = false ">关闭</el-button>
          </div>
      </el-dialog>

	  <el-dialog
			title="修改提现状态"
			:visible.sync="withdrawDialogVisible"
			width="20%"
			center>
			<el-form label-width="80px" :model="withdrawData" ref="ruleForm">
				<el-form-item label="提现状态:">
					<el-select v-model="withdrawData.withdraw_status">
						<el-option label="可提现" value="1"></el-option>
						<el-option label="不可提现" value="2"></el-option>
					</el-select>
				</el-form-item>
			</el-form>
			<div class="align-center">
				<el-button @click="withdrawDialogVisible = false">取 消</el-button>
				<el-button type="primary" @click="updateWithdrawStatus">确 定</el-button>
			</div>
		</el-dialog>
	</div>
</template>

<script>
	export default {
		data() {
			return {
				formData:{
					amount: '',
					busId: '',
					dealDesc: '',
					dealType: '',
					type: '',
					tenant_id:""
				},
				params: {
					pageNo: 1,
					pageSize: 10,
					phone:'',
					isCount: true,
					tenantId: '',
					id:'',
					parentId:'',
					endTime: '' ,
					startTime: '',
					firstRechargeStartTime:'',
					firstRechargeStartTime:'',
				},
				list: [],
				selectData: [],
				tenantList: [],
				timeArr: [],
				typeList:[
					{
						name:'入账',
						value: 1
					},{
						name:'支出',
						value: 2
					}
				],
				dealTypeList:[
					{
						name:'充值',
						value:1
					},{
						name:'下单支出',
						value:2
					},{
						name:'推广获利',
						value:3
					},{
						name:'订单包裹退款',
						value:4
					},{
						name:'提现支出',
						value:5
					},{
						name:'提现失败',
						value:6
					},{
						name:'其他',
						value:100
					}
				],
				total: 0,
				loading: false,
				dialogVisible: false,
				showInfo: false,
				detailLoading: false,
				busInfo: {},
				tenantInfo: {},

				withdrawDialogVisible: false,
				withdrawData:{
					id:'',
					withdrawStatus:'',
				},

				rechargeTimeArr: [],
			};
		},
		watch: {},

		created() {
			this.getTenantList()
		},

		mounted() {
			this.getList();
		},

		methods: {
			closeDialog(){
				this.formData = {
					amount: '',
					busId: '',
					dealDesc: '',
					dealType: '',
					type: '',
					tenant_id:"",
				}
			},
			openDialog(row){
				console.log(row)
				this.formData.tenant_id = row.tenant_id
				this.formData.busId = row.id
				this.dialogVisible = true
			},
			editMoney(){
				if(this.$common.isMoney(this.formData.amount)){
					this.$request.post({
						url:'/ReportApi/admin/addflow',
						params:this.formData,
						success: res=> {
							this.$message.success('修改成功')
							this.getList()
							this.dialogVisible = false
						}
					})
				}else{
					this.$message.error('请输入正确的金额')
				}
			},

			freezeOrThaw(id,status){
				const loading = this.$loading({
					lock: true,
					text: 'Loading',
					spinner: 'el-icon-loading',
					background: 'rgba(0, 0, 0, 0.7)'
				});
				this.$request.post({
					url:'/ReportApi/admin/userfreezeOrThaw',
					params:{
						id,
						status
					},
					success: res => {
						this.$message.success('操作成功')
						this.getList()
					},
					finally:res => {
						loading.close()
					}
				})
			},
			getTenantList(){
				this.$request.post({
					url: '/ReportApi/admin/useralllist',
					success: res => {
						this.tenantList = res
					}
				})
			},
			handleSizeChange(value) {
				this.params.pageSize = value 
				this.search()
			},
			timeChange(val){
				if(val){
					this.params.startTime = this.$common.getDate(val[0]);
					this.params.endTime = this.$common.getDate(val[1]);
				}else{
					this.params.startTime = ''
					this.params.endTime = ''
				}
			},
			rechargeTimeChange(val){
				if(val){
					this.params.firstRechargeStartTime = this.$common.getDate(val[0]);
					this.params.firstRechargeEndTime = this.$common.getDate(val[1]);
				}else{
					this.params.firstRechargeStartTime = ''
					this.params.firstRechargeEndTime = ''
				}
			},
			search(){
				this.params.pageNo = 1
				this.params.isCount = true 
				this.getList();
			},
			
			getList() {
				this.loading = true
				this.$request.post({
					url: '/ReportApi/admin/userlist',
					params: this.params,
					success: result =>{
						this.list = result[0] 
						if(this.params.isCount){
							this.params.isCount = false 
							this.total = result[1]
						}
					},
					finally: ()=>{
						this.loading = false 
					}
				})
			},


			getInfo(id){
				this.showInfo = true
				this.detailLoading = true
				this.$request.post({
					url: '/ReportApi/admin/userdetail',
					params: {
						id
					},
					success: result =>{
						this.busInfo = result.info
						this.busInfo.encrypt = result.encrypt
						this.tenantInfo = result.tenantInfo
					},
					finally: ()=>{
						setTimeout(()=>{
							this.detailLoading = false
						}, 1000)
					}
				})
			},

			//修改提现状态
			openWithdrawDialog(row){
				this.withdrawData.id = row.id;
				this.withdrawData.withdrawStatus = row.withdrawStatus + '';
				this.withdrawDialogVisible = true;
			},
			updateWithdrawStatus(){
				const loading = this.$loading({
					lock: true,
					text: 'Loading',
					spinner: 'el-icon-loading',
					background: 'rgba(0, 0, 0, 0.7)'
				});
				this.$request.post({
					url:'/ReportApi/admin/userupdateWithdrawStatus',
					params:this.withdrawData,
					success: res => {
						this.withdrawDialogVisible = false;
						this.$message.success('操作成功')
						this.getList()
					},
					finally:res => {
						loading.close()
					}
				})
			},
			


		},



		beforeDestroy() {}
	}
</script>

<style lang="scss">
.el-dialog{

}
</style>

<style lang="scss" scoped>
	.page{
		text-align: right;
		margin-top: 20px;
	}
	.el-dialog__wrapper{
		.el-select{
			width: 100%;
		}
		.el-input{
			width: 100%;
		}
	}

  .info_item{
      width: 250px;
  }

  .info_title{
      font-size: 20px;
      color: #00A2E9;
      padding-left: 10px;
  }


</style>
